<template>
	<view class="u-wrap u-p-l-20 u-p-r-20">
		<u-form :model="addModel" ref="form1">
			<u-form-item prop="name" label="类型:">
				<u-radio-group v-model="addModel.name">
					<u-radio activeColor="#00cc33" v-for="(item,index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="goodsName" label="名称:">
				<u-input placeholder="请输入名称" v-model="addModel.goodsName" />
			</u-form-item>
			<u-form-item prop="categoryName" label="分类:">
				<u-input @click="openSelect" placeholder="请选择分类" v-model="addModel.categoryName" />
				<u-select @confirm="selectConfirm" v-model="show" :list="selectList"></u-select>
			</u-form-item>
			<u-form-item prop="goodsDesc" label="简介:">
				<u-input placeholder="请输入简介" v-model="addModel.goodsDesc" />
			</u-form-item>
			<u-form-item prop="goodsPrice" label="价格:">
				<u-input placeholder="请输入价格" v-model="addModel.goodsPrice" />
			</u-form-item>
			<u-form-item prop="userName" label="联系人:" labelWidth="auto">
				<u-input placeholder="请输入联系人" v-model="addModel.userName" />
			</u-form-item>
			<u-form-item prop="phone" label="联系电话:" labelWidth="auto">
				<u-input placeholder="请输入联系电话" v-model="addModel.phone" />
			</u-form-item>
			<u-form-item prop="wxNum" label="微信号:" labelWidth="auto">
				<u-input placeholder="请输入微信号" v-model="addModel.wxNum" />
			</u-form-item>
			<u-form-item prop="address" label="联系地址:" labelWidth="auto">
				<u-input placeholder="请输入联系地址" v-model="addModel.address" />
			</u-form-item>
			<u-form-item prop="image" label="图片:"></u-form-item>
			<u-upload @on-remove="onRemove" @on-change="onChange" :action="action"></u-upload>
		</u-form>
		<u-button @click="commit" :customStyle="customStyle">发布</u-button>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';

	// 引入后端api
	// import { categoryApi } from '../../api/goods.js'

	// 引入onReady生命周期函数，页面渲染时读取后端数据
	import {
		onReady
	} from '@dcloudio/uni-app'

	// 引入http请求文件
	// import http from '../../common/http.js'

	// 引入用户状态管理
	import { isLoggedIn, getCurrentUser } from '../../common/userStore.js';

	// 表单数据
	const addModel = reactive({
		userId: '',
		name: '闲置',
		type: '',
		goodsName: '',
		categoryId: '',
		categoryName: '',
		goodsDesc: '',
		goodsPrice: '',
		userName: '',
		phone: '',
		wxNum: '',
		image: '',
		address: ''
	})

	// 物品发布类型
	const list = [{
			name: '闲置',
			disabled: false
		},
		{
			name: '求购',
			disabled: false
		}
	]

	// 图片上传
	// const value = ref('')
	// const action = ref('')
	// const fileList = ref([])

	// 发布按钮
	const customStyle = reactive({
		background: '#00cc33',
		color: '#fff',
		marginTop: '15px',
		width: '100%'
	})

	// 下拉菜单显示与否
	const show = ref(false)

	// 打开分类菜单
	const openSelect = () => {
		show.value = true;
	}

	// 分类数据
	const selectList = ref([
		{ value: '1', label: '手机' },
		{ value: '2', label: '电脑' },
		{ value: '3', label: '衣服' },
		{ value: '4', label: '鞋子' },
		{ value: '5', label: '图书' },
		{ value: '6', label: '时尚' },
		{ value: '7', label: '手作' }
	])

	// 选择分类
	const selectConfirm = (e) => {
		console.log(e)
		addModel.categoryName = e[0].label;
		addModel.categoryId = e[0].value;
	}

	// 图片上传路径
	const action = ref(http.baseUrl + '/api/upload/uploadImage')

	// 存储图片路径
	const imgUrl = ref([])

	// 图片上传触发
	const onChange = (res, index, list, name) => {
		console.log(res.data)
		// let result = JSON.parse(res.data)
		// 把返回的图片放到imgUrl
		// imgUrl.value.push(http.baseUrl + result.data)
		// console.log(imgUrl.value)
	}

	// 图片移除
	const onRemove = (res) => {
		console.log('图片移除', res);
	};

	// 提交表单
	const commit = () => {
		// 检查登录状态
		if (!isLoggedIn()) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000
			});
			
			setTimeout(() => {
				uni.navigateTo({
					url: '../login/login'
				});
			}, 1000);
			
			return;
		}
		
		// 表单验证
		if (!addModel.goodsName) {
			uni.showToast({
				title: '请输入商品名称',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		
		if (!addModel.categoryName) {
			uni.showToast({
				title: '请选择分类',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		
		if (!addModel.goodsPrice) {
			uni.showToast({
				title: '请输入价格',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		
		// 模拟发布成功
		uni.showToast({
			title: '发布成功',
			icon: 'success',
			duration: 2000
		});
		
		// 清空表单
		addModel.goodsName = '';
		addModel.categoryName = '';
		addModel.categoryId = '';
		addModel.goodsDesc = '';
		addModel.goodsPrice = '';
		addModel.userName = '';
		addModel.phone = '';
		addModel.wxNum = '';
		addModel.image = '';
		addModel.address = '';
		
		// 跳转到首页
		setTimeout(() => {
			uni.switchTab({
				url: '../index/index'
			});
		}, 2000);
	};

	// 页面加载时检查登录状态并填充用户信息
	onMounted(() => {
		// 检查登录状态
		if (isLoggedIn()) {
			const user = getCurrentUser();
			addModel.userId = user.userId;
			addModel.userName = user.username;
			addModel.phone = user.phone;
		} else {
			// 未登录跳转到登录页
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000
			});
			
			setTimeout(() => {
				uni.navigateTo({
					url: '../login/login'
				});
			}, 1000);
		}
	});
</script>


<style>

</style>